<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>首页</title>
  <link rel="stylesheet" href="./bootstrap/bootstrap.min.css" />
  <link rel="stylesheet" href="./bootstrap/bootstrap-icons.css" />
  <link rel="stylesheet" href="./css/common.css" />
  <link rel="stylesheet" href="./css/index.css" />
</head>

<body class="application application-offset">
  <div class="container-fluid container-application">
    <div class="sidenav show" id="sidenav-main">
      <!-- Sidenav header -->
      <div class="sidenav-header d-flex align-items-center">
        <a class="navbar-brand" href="./index.html">
          <span class="logo">·ITCAST·</span>
        </a>
      </div>
      <!-- User mini profile -->
      <div class="sidenav-user d-flex flex-column align-items-center justify-content-between text-center">
        <!-- Avatar -->
        <div>
          <a href="#" class="avatar rounded-circle avatar-xl">
            <img alt="Image placeholder" src="https://yanxuan-item.nosdn.127.net/8b27deb1670c53e67c42ca3e1ed6fd12.jpg"
              class="" />
          </a>
          <div class="mt-5">
            <h5 class="mb-0 text-white">黑马前端</h5>
            <span class="d-block text-sm text-white opacity-8 mb-3">数据可视化</span>
            <a href="javascript:;" class="btn btn-sm btn-white btn-icon rounded-pill shadow hover-translate-y-n3">
              <span class="btn-inner--text">学前端来黑马</span>
            </a>
          </div>
        </div>
      </div>
      <!-- Application nav -->
      <div class="nav-application clearfix">
        <a href="./index.html" class="btn btn-square text-sm active">
          <span class="btn-inner--icon d-block"><i class="bi bi-house bi-2x"></i></span>
          <span class="btn-inner--icon d-block pt-2">首页</span>
        </a>
        <a href="./student.html" class="btn btn-square text-sm">
          <span class="btn-inner--icon d-block"><i class="bi bi-people bi-2x"></i></span>
          <span class="btn-inner--icon d-block pt-2">学生</span>
        </a>
        <a href="javascript:;" class="btn btn-square text-sm">
          <span class="btn-inner--icon d-block"><i class="bi bi-columns bi-2x"></i></span>
          <span class="btn-inner--icon d-block pt-2">排版</span>
        </a>
        <a href="javascript:;" class="btn btn-square text-sm">
          <span class="btn-inner--icon d-block"><i class="bi bi-files bi-2x"></i></span>
          <span class="btn-inner--icon d-block pt-2">资料</span>
        </a>
        <a href="javascript:;" class="btn btn-square text-sm">
          <span class="btn-inner--icon d-block"><i class="bi bi-receipt bi-2x"></i></span>
          <span class="btn-inner--icon d-block pt-2">就业</span>
        </a>
        <a href="javascript:;" class="btn btn-square text-sm">
          <span class="btn-inner--icon d-block"><i class="bi bi-gear bi-2x"></i></span>
          <span class="btn-inner--icon d-block pt-2">设置</span>
        </a>
      </div>
      <!-- Misc area -->
      <div class="card bg-gradient-warning">
        <div class="card-body">
          <h5 class="text-white">哈喽, 朋友!</h5>
          <p class="text-white mb-4">为什么不现在开始学习前端，创造一些令人惊叹的东西呢？</p>
          <a href="http://itcast.cn" class="btn btn-sm btn-block btn-white rounded-pill" target="_blank">Get started</a>
        </div>
      </div>
    </div>
    <div class="main-content position-relative">
      <nav class="navbar navbar-main navbar-expand-lg navbar-dark navbar-border" id="navbar-main">
        <div class="container-fluid">
          <!-- Navbar nav -->
          <div class="collapse navbar-collapse navbar-collapse-fade" id="navbar-main-collapse">
            <ul class="navbar-nav align-items-lg-center">
              <!-- Home  -->
              <li class="nav-item">
                <a class="nav-link pl-lg-0" href="./index.html"> 首页 </a>
              </li>
              <li class="nav-item">
                <a class="nav-link pl-lg-0" href="./index.html"> 传智教育 </a>
              </li>
              <li class="nav-item">
                <a class="nav-link pl-lg-0" href="./index.html"> 黑马程序员 </a>
              </li>
              <li class="nav-item">
                <a class="nav-link pl-lg-0" href="./index.html"> 文档 </a>
              </li>
            </ul>
            <!-- Right menu -->
            <ul class="navbar-nav ml-lg-auto align-items-center d-none d-lg-flex">
              <li class="nav-item dropdown dropdown-animate">
                <a class="nav-link pr-lg-0" href=".dropdown-menu" role="button" data-toggle="dropdown"
                  aria-haspopup="true" aria-expanded="false">
                  <div class="media media-pill align-items-center">
                    <span class="avatar rounded-circle">
                      <img alt="Image placeholder"
                        src="https://yanxuan-item.nosdn.127.net/8b27deb1670c53e67c42ca3e1ed6fd12.jpg" />
                    </span>
                    <div class="ml-2 d-none d-lg-block">
                      <span class="mb-0 text-sm font-weight-bold" id="navName">Admin</span>
                    </div>
                  </div>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link pl-lg-0" id="logout" href="javascript:;"> 退出 </a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
      <div class="page-content">
        <!-- Page Title -->
        <div class="page-title">
          <div class="row justify-content-between align-items-center">
            <div class="col-md-6 mb-3 mb-md-0">
              <h5 class="h3 font-weight-400 mb-0 text-white">Dashboard</h5>
              <span class="text-sm text-white opacity-8">上海黑马前端 xx 期</span>
            </div>
          </div>
        </div>
        <!-- charts -->
        <div class="row">
          <div class="col-xl-3 col-md-6">
            <div class="card card-stats">
              <div class="card-body">
                <div class="row">
                  <div class="col">
                    <h6 class="text-muted mb-1">就业薪资</h6>
                    <span name="salary" class="h3 font-weight-bold mb-0 ">12500</span>
                  </div>
                  <div class="col-auto">
                    <i class="bi bi-coin"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-xl-3 col-md-6">
            <div class="card card-stats">
              <div class="card-body">
                <div class="row">
                  <div class="col">
                    <h6 class="text-muted mb-1">班级人数</h6>
                    <span name="student_count" class="h3 font-weight-bold mb-0 ">44</span>
                  </div>
                  <div class="col-auto">
                    <i class="bi bi-people"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-xl-3 col-md-6">
            <div class="card card-stats">
              <div class="card-body">
                <div class="row">
                  <div class="col">
                    <h6 class="text-muted mb-1">平均年龄</h6>
                    <span name="age" class="h3 font-weight-bold mb-0 ">24.40</span>
                  </div>
                  <div class="col-auto">
                    <i class="bi bi-calendar2-week"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-xl-3 col-md-6">
            <div class="card card-stats">
              <!-- Card body -->
              <div class="card-body">
                <div class="row">
                  <div class="col">
                    <h6 class="text-muted mb-1">小组个数</h6>
                    <span name="group_count" class="h3 font-weight-bold mb-0 ">8</span>
                  </div>
                  <div class="col-auto">
                    <i class="bi bi-collection"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col col-xl-8">
            <div class="card" id="line" style="height: 400px;"></div>
          </div>
          <div class="col col-xl-4">
            <div class="card" id="salary" style="height: 400px;"></div>
          </div>
          <div class="col col-xl-12">
            <div class="card" style="height: 400px;">
              <div class="card-header">
                <div class="d-flex justify-content-between align-items-center">
                  <h6 class="mb-0">班级每组薪资</h6>
                  <div id="btns">
                    <button type="button" class="btn btn-xs btn-blue">1</button>
                    <button type="button" class="btn btn-xs ">2</button>
                    <button type="button" class="btn btn-xs ">3</button>
                    <button type="button" class="btn btn-xs ">4</button>
                    <button type="button" class="btn btn-xs ">5</button>
                    <button type="button" class="btn btn-xs ">6</button>
                    <button type="button" class="btn btn-xs ">7</button>
                    <button type="button" class="btn btn-xs ">8</button>
                  </div>
                </div>
              </div>
              <div class="card-body p-0" id="lines"></div>
            </div>
          </div>
          <div class="col col-xl-4">
            <div class="card" id="gender" style="height: 500px;"></div>
          </div>
          <div class="col col-xl-8">
            <div class="card" id="map" style="height: 500px;"></div>
          </div>
        </div>
        <!-- footer -->
        <div class="footer pt-5 pb-4 footer-light" id="footer-main">
          <div class="row text-center text-sm-left align-items-sm-center">
            <div class="col-sm-6">
              <p class="text-sm mb-0">© 2022 <a href="https://itcast.cn" class="h6 text-sm" target="_blank">前端学科</a>.
                All rights reserved.</p>
            </div>
            <div class="col-sm-6 mb-md-0">
              <ul class="nav justify-content-center justify-content-md-end">
                <li class="nav-item">
                  <a class="nav-link" href="#">Support</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Terms</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link pr-0" href="#">Privacy</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="./bootstrap/bootstrap.min.js"></script>
  <script src="./lib/axios.js"></script>
  <script src="./lib/echarts.min.js"></script>
  <script src="./js/common.js"></script>
  <script src="./lib/china.js"></script>
  <!-- <script src="./js/index.js"></script> -->
  <script>
    //注册和登录无token也能看
    //1.先从本地取出token值
    let token = localStorage.getItem('user-token')
    //localStorage.getItem如果没有取到对应值，则返回null
    //2.判断有无无token
    if (token === null) {
      location.href = './login.html'
    }
    //3.从本地取出用户名
    let username = localStorage.getItem('user-name')
    document.querySelector('#navName').innerHTML = username
    //4.用户退出登录功能
    document.querySelector('#logout').addEventListener('click', () => {
      //退出 
      // (1)清除本地存储内容 
      // (2)返回到登录页(不一定，根据需求来定)
      localStorage.clear()
      location.href = './login.html'
    })
  </script>
  <script>
    //5.尝试获取首页面板的统计数据
    //封装一个渲染函数
    async function renderData() {
      await axios({
        url: '/dashboard',
        method: 'get',
        // //设置请求头
        // headers: { 
        //   Authorization:localStorage.getItem('user-token') 
        // }
      }).then(res => {
        //成功回调
        console.log(res)
        //目标：把概念的数据直接放入目标盒子

        //思路1：挨个用那么属性获取，提取数据内容赋予
        // document.querySelector('[name=salary]').innerHTML = res.data.overview.salary
        // 所有盒子同理......很麻烦

        //思路2：结构
        // let { salary, age, group } = res.data.overview
        // document.querySelector('[name=salary]').innerHTML = salary

        //思路3：循环(前提为有规律对应)
        //标签name属性和值对应
        //结构
        let { overview, year, salaryData, groupData, provinceData } = res.data.data
        // console.log(overview);
        for (let key in overview) {
          document.querySelector(`[name=${key}]`).innerHTML = overview[key]
        }



        //写任何需求5步套路，在此基础上，找组件套路
        //明确目标
        //1.找组件(类似就行)
        //2.读组件(标签/配置项js)
        //3.删组件(删除没有用的duoyxiang)
        //4.增组件(额外的配置项查找)
        // (1)如果知道哪个配置项，可以直接使用
        // (2)如果不知道，找相关类似的例子(看差别)/百度
        //5.改组件(把数据/名字改改)

        //6.渲染薪资走势折线图
        //封装一个函数铺设薪资走势(折线图)
        const initSalaryTrendFn = (year) => {
          // 基于准备好的dom，初始化echarts实例
          let myChart = echarts.init(document.getElementById('line'));
          //从后台获取薪资走势图X轴数据
          let xData = year.map(Element => Element.month)//['1月',...,'12月']
          let yData = year.map(Element => Element.salary)
          // 使用刚指定的配置项和数据显示图表。
          let option = {
            title: {
              text: '2021全学科薪资走势',
              textStyle: { //标题文字样式
                fontSize: '16' //字体大小
              },
              left: '10px',
              top: '15px'
            },
            grid: {//直角坐标系内绘图网格
              top: '20%'
            },
            xAxis: {
              type: 'category', //默认用series.data的值作为X轴离散数据,如果有自己的data就用自己的
              data: xData, //x轴数据
              axisLine: {
                lineStyle: {
                  type: 'dashed',
                  color: '#ccc'
                }
              },
              axisLabel: {
                color: '#999'
              }
            },
            yAxis: {
              type: 'value',//竖直轴（默认），用series.data的值作为y轴
              splitLine: { //分割线
                lineStyle: {
                  type: 'dashed'
                }
              }
            },
            series: [
              {
                data: yData,//数据
                type: 'line', //类似，折线图
                smooth: true, //是否平滑显示
                symbolSize: 10,
                lineStyle: { //折线图-线段(不包含原点样式)
                  width: 6,
                  color: { //线颜色:rgb或者16进制，如果渐变色用对象形式
                    type: 'linear',
                    x: 0,//左
                    y: 0,//上
                    x2: 1,//右
                    y2: 0,//下
                    colorStops: [
                      {
                        offset: 0,
                        color: '#499FEE' //0%处的颜色
                      },
                      {
                        offset: 1,
                        color: '#5D75F0' //100%处的颜色
                      }
                    ],
                    global: false // 缺省为false(代表x,y,x2,y2占据容器百分比0-1)
                  }
                },
                areaStyle: {
                  color: { //线颜色:rgb或者16进制，如果渐变色用对象形式
                    type: 'linear',
                    x: 0,//左
                    y: 0,//上
                    x2: 0,//右
                    y2: 1,//下
                    colorStops: [
                      {
                        offset: 0,
                        color: '#499FEE' //0%处的颜色
                      },
                      {
                        offset: 0.8,
                        color: 'rgba(255,255,255,0.2)' //80%处的颜色
                      },
                      {
                        offset: 1,
                        color: 'rgba(255,255,255,0)' //100%处的颜色
                      }
                    ],
                    global: false // 缺省为false(代表x,y,x2,y2占据容器百分比0-1)
                  }
                }
              }
            ]
          };
          myChart.setOption(option);
        }
        // 调用薪资走势折线图函数
        initSalaryTrendFn(year)


        //7.渲染薪资分布饼状图
        //封装一个函数铺设薪资(饼状图)
        const initSalarySpreadFn = (salaryData) => {
          // 基于准备好的dom，初始化echarts实例
          let myChart = echarts.init(document.getElementById('salary'));
          //指定图表配置项和数据
          let option = {
            tooltip: { // 提示框组件
              trigger: 'item' // 放到某项触发提示框
            },
            legend: { // 图例组件(表示每种颜色的概念)
              bottom: '6%',
              left: 'center' // 图例组件居中显示
            },
            title: {
              text: '班级薪资分布',
              top: 15,
              left: 10,
              textStyle: {
                fontSize: 16
              }
            },
            color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
            series: [ // 系列数据(重要)
              {
                name: '薪资分布', // 系列名称，用于tooltip的显示
                type: 'pie', // 图形类型'pie'固定代表饼状图
                radius: ['50%', '64%'], // 饼图的半径(内圈, 外圈) 表示外半径为可视区尺寸（容器高宽中较小一项）的 20%
                center: ['50%', '45%'],

                itemStyle: { // 图形样式
                  borderRadius: 10, // 表示内圆角半径和外圆角半径
                  borderColor: '#fff', // 图形的描边颜色
                  borderWidth: 2 // 描边线宽(为0无描边)
                },
                label: { // 饼图图形上的文本标签(默认上来显示的, 鼠标移入是另外配置)
                  show: false, // 隐藏
                  position: 'center' // 让他们出现在中心
                },

                labelLine: { // 标签的视觉引导线配置(就是解释每块图形的文本标签连线)
                  show: false
                },
                // data: [ // 系列数据
                //   { value: 1048, name: 'Search Engine' },
                //   { value: 735, name: 'Direct' },
                //   { value: 580, name: 'Email' },
                //   { value: 484, name: 'Union Ads' },
                // ]
                data: salaryData.map(Element => {
                  return {
                    value: Element.g_count + Element.b_count, name: Element.label
                  }
                })
              }
            ]
          }
          myChart.setOption(option);
        }
        //调用薪资分布饼状图函数
        initSalarySpreadFn(salaryData)


        //8.渲染班级每组薪资柱状图
        //封装一个班级每组薪资柱状图函数
        const initGroupSalaryFn = (groupData) => {
          // 基于准备好的dom，初始化echarts实例
          let myChart = echarts.init(document.getElementById('lines'));
          //groupData是个对象,key是组号(1-8数字字符串)
          //隐藏知识点:js对象里key如果是数字，默认内部会转成字符串使用
          let firstGroupNameArr = groupData['1']
          //x轴上的人名
          let firstNameArr = firstGroupNameArr.map(Element => Element.name)
          //x轴上绿色柱状图数据
          let hopeSalaryArr = firstGroupNameArr.map(Element => Element.hope_salary)
          //x轴上蓝色柱状图数据
          let salaryArr = firstGroupNameArr.map(Element => Element.salary)
          //指定图表配置项和数据
          let option = {
            grid: {
              left: 70,
              top: 30,
              right: 30,
              bottom: 50,
            },
            tooltip: {
              trigger: 'item',
            },
            xAxis: {
              type: 'category',
              data: firstNameArr,
              axisLine: {
                lineStyle: {
                  color: '#ccc',
                  type: 'dashed'
                }
              },
              axisLabel: {
                color: '#999'
              }
            },
            yAxis: {
              type: 'value',
              splitLine: {
                lineStyle: {
                  type: 'dashed'
                }
              }
            },
            series: [
              {
                data: hopeSalaryArr,
                type: 'bar',
                name: '期望薪资'
              },
              {
                data: salaryArr,
                type: 'bar',
                name: '就业薪资'
              }
            ],
            color: [
              {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#34D39A', // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(52,211,154,0.2)', // 100% 处的颜色
                  },
                ],
              },
              {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#499FEE', // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(73,159,238,0.2)', // 100% 处的颜色
                  },
                ],
              },
            ],
          }
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);

          //原生js实现高亮(事件委托)
          document.querySelector('#btns').addEventListener('click', e => {
            if (e.target.tagName === 'BUTTON') {
              //获取薪现在高亮类名的那一个，把高亮类名移除
              document.querySelector('.btn-blue').classList.remove('btn-blue')
              //再给点击的这个添加上
              e.target.classList.add('btn-blue')
              //点击按钮拿到标签数字字符串，去groupData中去对应数组
              let indexStr = e.target.innerHTML
              let groupArr = groupData[indexStr]
              //让这个实例重新设置下选项
              //点击之后修改格数据
              //x轴上的人名
              let firstNameArr = groupArr.map(Element => Element.name)
              //x轴上绿色柱状图数据
              let hopeSalaryArr = groupArr.map(Element => Element.hope_salary)
              //x轴上蓝色柱状图数据
              let salaryArr = groupArr.map(Element => Element.salary)
              //把option对象的属性值换掉
              option.xAxis.data = firstNameArr
              option.series[0].data = hopeSalaryArr
              option.series[1].data = salaryArr
              //换好值后重新使用刚指定的配置项和数据显示图表。
              myChart.setOption(option);

            }
          })


        }
        //调用班级每组薪资柱状图函数
        initGroupSalaryFn(groupData)


        //9.渲染男女薪资分布两个饼状图
        //封装一个男女薪资饼状图函数
        const initGenderSalaryFn = (salaryData) => {
          // 基于准备好的dom，初始化echarts实例
          let myChart = echarts.init(document.getElementById('gender'));
          //男生女生数据
          let bData = salaryData.map(Element => {
            return { name: Element.label, value: Element.b_count }
          })
          let gData = salaryData.map(Element => {
            return { name: Element.label, value: Element.g_count }
          })
          // 指定图表的配置项和数据
          let option = {
            title: [
              {
                text: '男女薪资分布',
                left: 10,
                top: 10,
                textStyle: {
                  fontSize: 16,
                },
              },
              {
                text: '男生',
                left: '50%',
                top: '45%',
                textAlign: 'center',
                textStyle: {
                  fontSize: 12,
                },
              },
              {
                text: '女生',
                left: '50%',
                top: '85%',
                textAlign: 'center',
                textStyle: {
                  fontSize: 12,
                },
              },
            ],
            tooltip: {
              trigger: 'item'
            },
            color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
            series: [
              {
                type: 'pie',
                radius: 50,
                radius: ['20%', '30%'],
                center: ['50%', '30%'],
                datasetIndex: 1,
                data: bData

              },
              {
                type: 'pie',
                radius: 50,
                radius: ['20%', '30%'],
                center: ['50%', '70%'],
                datasetIndex: 2,
                data: gData
              }
            ]
          }
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
        }
        //调用男女薪资饼状图函数
        initGenderSalaryFn(salaryData)


        //10.实例化地图
        //封装一个地图函数
        const initMapChartFn = (provinceData) => {
          //如果要描绘地图,不光需要echarts.js文件本身(还需要china.js地图数据js)
          let myChart = echarts.init(document.getElementById('map'));
          //地图上相关数据
          const dataList = [
            { name: '南海诸岛', value: 0 },
            { name: '北京', value: 0 },
            { name: '天津', value: 0 },
            { name: '上海', value: 0 },
            { name: '重庆', value: 0 },
            { name: '河北', value: 0 },
            { name: '河南', value: 0 },
            { name: '云南', value: 0 },
            { name: '辽宁', value: 0 },
            { name: '黑龙江', value: 0 },
            { name: '湖南', value: 0 },
            { name: '安徽', value: 0 },
            { name: '山东', value: 0 },
            { name: '新疆', value: 0 },
            { name: '江苏', value: 0 },
            { name: '浙江', value: 0 },
            { name: '江西', value: 0 },
            { name: '湖北', value: 0 },
            { name: '广西', value: 0 },
            { name: '甘肃', value: 0 },
            { name: '山西', value: 0 },
            { name: '内蒙古', value: 0 },
            { name: '陕西', value: 0 },
            { name: '吉林', value: 0 },
            { name: '福建', value: 0 },
            { name: '贵州', value: 0 },
            { name: '广东', value: 0 },
            { name: '青海', value: 0 },
            { name: '西藏', value: 0 },
            { name: '四川', value: 0 },
            { name: '宁夏', value: 0 },
            { name: '海南', value: 0 },
            { name: '台湾', value: 0 },
            { name: '香港', value: 0 },
            { name: '澳门', value: 0 },
          ]
          //dataList = provinceData
          //尝试:发现name和vale属性名一致，直接使用，发现不行
          //原因:地图数据dataList原本的对象里只有名字，不要省份，自治区等
          //解决：把"省"，"自治区"，"回族"都得替换成空字符串
          let newArr = provinceData.map(obj => {
            return {
              name: obj.name.replace(/省|自治区|回族/g, ''),
              value: obj.value
            }
          })
          //dataList = provinceData 发现有的省份还是NaN
          //原因:后台返回的数据省份对象,比地图里的省份数量少几个,所以地图里没找到newArr同名对象
          //解决遍历dataList数组，去provinceData数组里找同名的，把value值赋予过来
          dataList.forEach(obj => {
            let target = newArr.find(item => item.name === obj.name)
            if(target){
              obj.value = target.value
            }

          })

          let option = {
            title: {
              text: '籍贯分布',
              top: 10,
              left: 10,
              textStyle: {
                fontSize: 16,
              },
            },
            tooltip: {
              trigger: 'item',
              formatter: '{b}: {c} 位学员',
              borderColor: 'transparent',
              backgroundColor: 'rgba(0,0,0,0.5)',
              textStyle: {
                color: '#fff',
              },
            },
            visualMap: {
              min: 0,
              max: 6,
              left: 'left',
              bottom: '20',
              text: ['6', '0'],
              inRange: {
                color: ['#ffffff', '#0075F0'],
              },
              show: true,
              left: 40,
            },
            geo: { // 地理坐标系组件
              map: 'china',
              roam: false,
              zoom: 1.0,
              label: {
                normal: {
                  show: true,
                  fontSize: '10',
                  color: 'rgba(0,0,0,0.7)',
                },
              },
              itemStyle: {
                normal: {
                  borderColor: 'rgba(0, 0, 0, 0.2)',
                  color: '#e0ffff',
                },
                emphasis: {
                  areaColor: '#34D39A',
                  shadowOffsetX: 0,
                  shadowOffsetY: 0,
                  shadowBlur: 20,
                  borderWidth: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
              },
            },
            series: [
              {
                name: '籍贯分布',
                type: 'map',
                geoIndex: 0,
                data: dataList,
              },
            ],
          }
          myChart.setOption(option)
        }
        //调用地图函数
        initMapChartFn(provinceData)
      });
    }
    //调用渲染数据函数
    renderData()



  </script>
</body>

</html>